본문으로 건너뛰기

forwardRef

🧑🏻‍💻 forwardRef


forwardRef를 사용하면 컴포넌트가 ref를 사용하여 부모 컴포넌트에 DOM 노드를 노출할 수 있다.

✅ forwardRef 문법

const SomeComponent = forwardRef(render)
  • render는 컴포넌트의 렌더링 함수이다.
  • forwardRefref prop을 받을 수 있고 JSX에서 렌더링할 수 있는 React 컴포넌트를 반환한다.

🧑🏻‍💻 알고 가기


✅ forwardRef를 언제 사용해야 하는가?

  • 부모 컴포넌트에 DOM 노드 노출할 때
  • 노드로 스크롤하기, 노드에 focus 맞추기, 애니메이션 트리거하기, 비디오 재생 및 정지하기, 텍스트 선택하기 등 prop으로 표현할 수 없는 필수적인 동작에 쓸 때

✅ 주의 사항

  • prop으로 무언가를 표현할 수 있다면 ref를 사용하지 말자. 예를 들어, <Modal isOpen={isOpen} />과 같이 prop isOpen을 사용할 수 있다면, 굳이 { open, close }와 같은 명령형 핸들을 만들어 ref를 사용하지 말자.
  • ref를 과도하게 사용하지 말아야 한다.
  • prop으로 무언가를 표현할 수 있다면 ref를 사용해서는 안된다.

🧑🏻‍💻 활용 및 생각할 거리


✅ 언제 사용해야 하는 가?

  • 부모 컴포넌트에 DOM 노드 노출할 때
import { forwardRef } from 'react';

const MyInput = forwardRef(function MyInput(props, ref) {
const { label, ...otherProps } = props;
return (
<label>
{label}
<input {...otherProps} ref={ref} />
</label>
);
});
  • forwardRef 선언해서 부모 노드에 DOM 노드를 노출 시킬 수 있다.
import { useRef } from 'react';
import MyInput from './MyInput.js';

export default function Form() {
const ref = useRef(null);

function handleClick() {
ref.current.focus();
}

return (
<form>
<MyInput label="Enter your name:" ref={ref} />
<button type="button" onClick={handleClick}>
Edit
</button>
</form>
);
}
  • 부모 노드는 해당 DOM 노드를 조작할 수 있다.